<template>
  <div>
    <van-tabs v-model="currentCategoryid" @click="dianji">
      <van-tab
        :title="item.name"
        :name="item.id"
        v-for="item in brotherCategory"
        :key="item.id"
      >
        <div class="d1">
          <p>{{ item.name }}</p>
          <h4>{{ item.front_name }}</h4>
        </div>
      </van-tab>
    </van-tabs>

    <ul>
      <li v-for="item in data" :key="item.id">
        <img :src="item.list_pic_url" alt="" />
        <p>{{ item.name }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { GetCateGoryData, GetCateGoryList } from "@/api/leibie";
import Vue from "vue";
import { Tab, Tabs } from "vant";

Vue.use(Tab);
Vue.use(Tabs);
export default {
  name: "",
  data() {
    return {
      currentCategoryid: "",
      brotherCategory: [],
      data: [],
    };
  },
  created() {
    this.fenlei();
  },
  methods: {
    async fenlei() {
      let res = await GetCateGoryData({
        id: this.$route.query.id,
      });
      console.log("leibie", res);
      this.brotherCategory = res.data.brotherCategory;
      this.currentCategoryid = res.data.currentCategory.id;
      console.log(this.currentCategoryid);
      this.liebiao(this.currentCategoryid);
    },
    liebiao(id) {
      GetCateGoryList({ categoryId: id, page: "1", size: "1000" }).then(
        (res) => {
          console.log(222, res);
          this.data = res.data.data;
        }
      );
    },
    dianji(name, title) {
      console.log(name, title);
      this.liebiao(name);
    },
  },
};
</script>
<style lang="less" scoped>
</style>